<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dom 演示</title>

    <style>
        .container {
            border: 1px solid #ccc;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <div id="div1" class="container">
        <p id="p1">一段文字 1</p>
        <p>一段文字 2</p>
        <p>一段文字 3</p>
    </div>
    <div id="div2">
        <img src="https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg" />
    </div>
    <ul id="list">
    </ul>
    <script>
        // 通过id获取
        const div1 = document.getElementById('div1');
        console.log('div1', div1);

        // 通过tagname获取
        // 是个集合
        const divList = document.getElementsByName('div');
        console.log('divList.length', divList.length);
        console.log('divList[0]', divList[0]);

        // 通过类名获取
        const containerList = document.getElementsByClassName('container');

        // 通过css选择器来选择
        // const pList = document.querySelectorAll('p')
        const list = document.getElementById('list');

        // 创建一个文档片段，此时还没有插入到 DOM 结构中
        const frag = document.createDocumentFragment();


        // 演示property属性
        //property 形式，是一种通过js操作页面结构的形式，设置js变量的属性，设置不会对标签影响
        const pList = document.querySelectorAll('p');
        const p1 = pList[0];
        // p1.style.width = '100px'
        // console.log(p1.style.width); // 100px
        // p1.className = 'red';
        // console.log(p1.className); // red
        // console.log(p1.nodeName); // p
        // console.log(p1.nodeType); // 1


        // attribute
        // 手动自定义设置的属性，真正作用于DOM结构，会对标签产生影响,作用到节点属性
        p1.setAttribute('data-name', 'imooc')
        console.log(p1.getAttribute('data-name')); // imooc

        p1.setAttribute('style', 'font-size:50px')
        console.log(p1.getAttribute('style')); //50px
    </script>
</body>

</html>